<template>
	<view class="indexDetailsBox">
		<view class="indexDetailsBox-topBox">
			<view class="indexDetailsBox-topBox-top">
				<view class="indexDetailsBox-topBox-top-one">设备信息</view>
				<view class="indexDetailsBox-topBox-top-two">
					<view class="topLeft">
						<view class="item"><span class="item-name">设备编码:</span> <span
								class="item-num">{{fackData.transformerSn}}</span>
						</view>
						<view class="item"><span class="item-name">公司名称:</span><span
								class="item-num">{{fackData.company}}</span>
						</view>
						<view class="item"><span class="item-name">地址:</span><span
								class="item-num">{{fackData.address}}</span></view>
					</view>
					<view class="topRight">
						<view class="imgBox">
							<image src="../../static/sb.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="indexDetailsBox-bottom">
			<up-tabs :list="list" lineWidth="50" lineHeight="3" itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" lineColor="#00AC79" :activeStyle="{
			            color: '#00AC79',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }"  @click="itemClick">

			</up-tabs>
			<realTimeData v-if="activeName===0" :itemObj="botData"></realTimeData>
			<qualityData v-if="activeName===1" :itemObj="botData"></qualityData>
			<electricityData v-if="activeName===2" :itemObj="botData"></electricityData>
			<demandData v-if="activeName===3" :itemObj="botData"></demandData>
			<allCharts ref="mycharts" v-if="activeName===4"></allCharts>
			<indexNews v-if="activeName===5" :itemObj="botData"></indexNews>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		ref,
		reactive,
		nextTick,
		getCurrentInstance
	} from 'vue'
	let {
		proxy
	} = getCurrentInstance();
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import realTimeData from '@/components/realTimeData/realTimeData.vue'
	import qualityData from '@/components/qualityData/qualityData.vue'
	import electricityData from '@/components/electricityData/electricityData.vue'
	import demandData from '@/components/demandData/demandData.vue'
	import allCharts from '@/components/allCharts/allCharts.vue'
	import indexNews from '@/components/indexNews/indexNews.vue'
	
	const list = reactive([{
			name: '实时数据',

		},
		{
			name: '电能质量数据'
		},
		{
			name: '电能数据'
		},
		{
			name: '需量数据'
		},
		{
			name: '图表分析'
		},
		{
			name: '预警信息'
		}

	])
	let activeName = ref(0)
	const itemClick = (item) => {
		activeName.value = item.index
	}
	let intervalId = null;

	const mycharts = ref();
	const setTimeF = () => {
		intervalId = setInterval(() => {
			if (activeName.value != 4) {
				getRealTimeList(fackData.value.transformerSn)
			} else {
				
				mycharts.value.getNew()
			}
		}, 1000*60)
	}
	let fackData = ref({}) //顶部
	let botData = ref({}) //下部
	// 获取实时数据
	const getRealTimeList = (snCode) => {
		let opts = {
			url: `${proxy.$api.getRealTime}?sns=${snCode}`,
			method: "POST",
		};

		proxy.$request.httpTokenRequest(opts).then((res) => {
			if (res.data.code === 200) {
				botData.value = res.data.data[0]
			} else {
				proxy.$refs.uToast.show({
					type: 'error',
					message: res.data.msg
				})
			}
		}).catch((err) => {
			proxy.$refs.uToast.show({
				type: 'error',
				message: res.data.msg
			})
		})

	}
	onUnmounted(() => {
		if (intervalId) {
			clearInterval(intervalId);
		}
	});

	onLoad((option) => {
		fackData.value = JSON.parse(decodeURIComponent(option.item))
		getRealTimeList(JSON.parse(decodeURIComponent(option.item)).transformerSn)
		setTimeF()
	})
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss">
	.indexDetailsBox {
		&-topBox {
			width: 100%;
			// height: 280rpx;
			background-image: url('../../static/bg.png');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;

			&-top {
				padding: 24rpx 32rpx;
				box-sizing: border-box;

				&-one {
					font-size: 32rpx;
					color: #000;
					font-weight: 550;
					margin-bottom: 38rpx;
				}

				&-two {
					display: flex;
					justify-content: space-between;

					.topLeft {
						flex: 70%;

						.item {
							display: flex;
							margin-bottom: 15rpx;
					
							&-name {
								flex: 30%;
								font-size: 28rpx;
								color: #333;
								width: 200rpx;
							}

							&-num {
								flex: 80%;
								text-align: left;
								margin-left: 20rpx;
								font-size: 28rpx;
								color: #000;
							}
						}
					}

					.topRight {
						flex: 30%;

						.imgBox {
							margin-top: -55rpx;
							width: 114rpx;
							height: 114rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

		}

		&-bottom {
			margin-top: 26rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
			width: 100%;
			// height: calc(100vh - 306rpx);
			// height: 100vh;
		}
	}
</style>